<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>

<div id="app">
    <!--搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--批量删除 新增按钮-->
    <el-row>
        <el-button type="danger" @click="deleteByIds" plain>批量删除</el-button>
        <el-button type="primary" @click="dialogFormVisible = true,title = '新增品牌',updateStyle = 'display:none',addStyle = '',form = {}" plain>新增</el-button>
    </el-row>

    <!--新增对话框-->
    <el-dialog title="编辑品牌" :title="title" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="form.brandName"></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="form.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="form.ordered"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <!--switch开关的值（修改数据回显），后台返回是Number类型设置需要设置模型属性，返回的是String类型无需设置-->
                <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add" :style="addStyle">新增</el-button>
                <el-button type="primary" @click="updateById" :style="updateStyle">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--表格-->
    <el-table
            :data="brands"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                type="index"
                width="50">
        </el-table-column>
        <el-table-column
                prop="brandName"
                label="品牌名称"
                align="center">
        </el-table-column>
        <el-table-column
                prop="companyName"
                label="企业名称"
                align="center">
        </el-table-column>
        <el-table-column
                prop="ordered"
                label="排序"
                align="center">
        </el-table-column>
        <el-table-column
                prop="statusStr"
                label="当前状态"
                align="center">
        </el-table-column>
        <el-table-column
                label="操作"
                align="center">
            <template slot-scope="scope">
            <el-row>
                <el-button type="primary" size="small" @click="updateForm(scope.row)">修改</el-button>
                <el-button type="danger" size="small" @click="deleteById(scope.row)">删除</el-button>
            </el-row>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>


<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>

    new Vue({
        el: "#app",
        data() {
            return {
                //批量删除选中id
                ids:[],
                //新增按钮隐藏
                addStyle:"",
                //修改按钮隐藏
                updateStyle:"",
                //新增修改表单名称
                title:"",
                //当前页码
                currentPage:1,
                //总条数
                total:50,
                //当前页码显示条数
                pageSize:10,
                //对话框属性
                dialogFormVisible: false,
                //对话框表格模型
                form: {},
                //多选框数据
                multipleSelection: [],
                //表格模型
                brands: [],
                //搜索表单模型
                brand: {}
            }
        },
        methods: {
            //多选框返回数据方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //批量删除方法
            deleteByIds(){
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    this.ids[i] = this.multipleSelection[i].id;
                }
                console.log(this.ids)
                if (this.ids.length != 0){
                    this.$confirm('此操作将删除选中数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios({
                            method:"post",
                            url:"http://localhost:8080/brand-case/brand/deleteByIds",
                            data:this.ids
                        }).then(resp =>{
                            if (resp.data == "success") {
                                this.ids = [];
                                // 删除成功
                                this.selectPageAndCondition();
                                //成功提示
                                this.$message({
                                    showClose: true,
                                    message: '删除成功！',
                                    type: 'success'
                                });
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            showClose: true,
                            type: 'info',
                            message: '已取消删除！'
                        });
                    });
                } else {
                    this.$message({
                        showClose: true,
                        type: 'info',
                        message: '未选中数据！'
                    });
                }
            },
            //修改表单数据回显
            updateForm(row){
                /*
                * 因为row是Object对象类型，如果直接赋值的话，就变成了浅拷贝，复制的是地址，
                * 导致在表单中改变值的时候table中的数据也跟着改变，所以要进行深拷贝，利用json就可以了，改成下面就行了
                * */
                this.form = JSON.parse(JSON.stringify(row));
                this.dialogFormVisible = true;
                this.title = '修改品牌';
                this.addStyle = 'display:none';
                this.updateStyle = 'display:';
            },
            //分页查询方法
            selectPageAndCondition() {
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
                    data:this.brand
                }).then(resp => {
                    this.brands = resp.data.rows;
                    this.total = parseInt(resp.data.totalCount);
                    console.log(typeof (this.total))
                });
            },

            //修改方法
            updateById(){
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case/brand/updateById",
                    data: this.form
                }).then(resp => {
                    if (resp.data == "success") {
                        // 修改成功
                        //关闭窗口
                        this.dialogFormVisible = false;

                        //重新加载页面（调用查询方法
                        this.selectPageAndCondition();

                        //成功提示
                        this.$message({
                            showClose: true,
                            message: '修改成功！',
                            type: 'success'
                        });

                        this.form = {};
                    }
                });
            },

            tableRowClassName({row, rowIndex}) {
                if (!(rowIndex%2 === 1)) {
                    return 'warning-row';
                }
                return '';
            },
            //搜索表单提交事件
            onSubmit() {
                this.currentPage = 1;
                this.selectPageAndCondition();
            },
            //新增表单提交事件
            //新增方法
            add() {
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case/brand/add",
                    data: this.form
                }).then(resp => {
                    if (resp.data == "success") {
                        // 添加成功
                        //关闭窗口
                        this.dialogFormVisible = false;
                        console.log(this.form.status)

                        //重新加载页面（调用查询方法
                        this.selectPageAndCondition();

                        //成功提示
                        this.$message({
                            showClose: true,
                            message: '新增成功！',
                            type: 'success'
                        });

                        this.form = {};
                    }
                });
            },
            //页码方法
            handleSizeChange(val) {
                this.pageSize = val;
                this.selectPageAndCondition();
                // console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.selectPageAndCondition();
                // console.log(`当前页: ${val}`);
            },
            //删除方法
            deleteById(row) {
                console.log(row);
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method:"get",
                        url:"http://localhost:8080/brand-case/brand/deleteById?id="+row.id
                    }).then(resp =>{
                        if (resp.data == "success") {
                            // 删除成功
                            this.selectPageAndCondition();
                            //成功提示
                            this.$message({
                                showClose: true,
                                message: '删除成功！',
                                type: 'success'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        //当页面加载完成
        //查询方法
        mounted() {
            this.selectPageAndCondition();
        }
    })
</script>
</body>
</html>